import React, { Component } from 'react';

//riskDegree: 0弱小的 1平常的 2旗鼓相当的 3强壮的 4危险的

export default class Map extends Component {
  constructor(props) {
    super(props)
    this.state = {
      showingTab: 0,// 0 as usual, 1 enemy show, 2 player show
      showingLifeId: 0,
    }
    console.log('Map component construct')
  }


  componentWillUnmount = () => {
    console.log('map unmount')
  }



  changeTab = (tab, id) => {
    this.setState({ showingTab: tab, showingLifeId: id })
  }

  enemyDetail = (enemyId) => {
    const it = this.props.map.lives.mobs.find(it => it.id === enemyId)
    return (
      <div>
        <div>level: {it.level}</div>
        <div>name: {it.name}</div>
        <div>hp: {it.hp}</div>
        <div>desc: {it.desc}</div>
      </div>
    )
  }

  playerDetail = playerId => {
    const it = this.props.map.lives.players.find(it => it.id === playerId)
    return (
      <div>
        <div>level: {it.level}</div>
        <div>name: {it.name}</div>
        <div>hp: {it.hp} / {it.max_hp}</div>
        <div>power: {it.power}</div>
      </div>
    )
  }

  lives = () => {
    const lives = this.props.map.lives
    const me = this
    const mobShow = lives == null ? (<div>没有生物</div>) : lives.mobs.map(it => {
      return (
        <div key={it.id}>
          <a onClick={() => { this.changeTab(1, it.id) }} href="#">Lv.{it.level} {it.name}</a>
          {it.dead_time === -1 ? (<button onClick={() => { this.props.attack(it) }}>攻击</button>) : (<span> Dead</span>)}

        </div>
      )
    })

    const playerShow = lives == null ? (<div>No players</div>) : lives.players.map(it => {
      if (it.id == this.props.player.id) {
        return (<div>Lv.{it.level} {it.name} <span>你自己</span> <span>{it.dead_time === -1 ? '' : '死亡'}</span></div>)
      }
      return (
        <div key={it.id}>
          <a onClick={() => { this.changeTab(2, it.id) }} href="#">Lv.{it.level} {it.name}</a>
          {it.dead_time === -1 ? (<button onClick={() => { this.props.attack(it) }}>攻击</button>) : (<span> Dead</span>)}
        </div>
      )
    })

    return (
      <div>
        <div>生物:</div>
        {mobShow}
        <div>玩家:</div>
        {playerShow}
      </div>
    )
  }


  all_postions = () => {
    const now_id = this.props.map.position.id
    const shows = this.props.map.all_position.map(it => {
      // console.log(it)
      if (it.id === now_id) {
        console.log('yes')
        return (
          <div key={it.id}>{it.name} 所在位置</div>
        )
      } else {
        return (
          <div key={it.id}><a href="#" onClick={() => { this.props.move(it.id, this.props.player.area_id) }} >{it.name}</a></div>
        )
      }

    })
    return (
      <div>{shows}</div>
    )
  }

  render() {
    const map = this.props.map

    if (this.state.showingTab === 0) {//Show map
      return (
        <div>
          <div>区域名称: {map.area.name} </div>
          <div>所在位置: {map.position.name} </div>
          <div>移动: </div>
          {this.all_postions()}
          <br />
          {this.lives()}
          <br />
        </div>
      )
    } else if (this.state.showingTab === 1) {// Show mob
      const detail = this.enemyDetail(this.state.showingLifeId)
      return (
        <div>
          <a href="#" onClick={() => { this.changeTab(0, 0) }}>返回</a> <br />
          {detail}
        </div>
      )
    } else if (this.state.showingTab === 2) {//Show player
      const detail = this.playerDetail(this.state.showingLifeId)
      return (
        <div>
          <a href="#" onClick={() => { this.changeTab(0, 0) }}>返回</a> <br />
          {detail}
        </div>
      )
    }
  }
}